let paper = [
    {
        img: '图片', examina: '2021年语文第一次月考', times: '本次是2021年语文第一次月考，', createp: '创建人', createname: '吴加好', createt: '创建时间', createtime: '2016-06-16 14:03', uses: '使用次数', number: '10次', id: '1'
    },
    {
        img: '图片', examina: '2021年语文第一次月考', times: '本次是2021年语文第一次月考，', createp: '创建人', createname: '吴加好', createt: '创建时间', createtime: '2016-06-16 14:03', uses: '使用次数', number: '10次', id: '2'
    },
    {
        img: '图片', examina: '2021年语文第二次月考', times: '本次是2021年语文第一次月考，', createp: '创建人', createname: '吴加好', createt: '创建时间', createtime: '2016-06-16 14:03', uses: '使用次数', number: '9次', id: '3'
    },
    {
        img: '图片', examina: '2021年语文第一次月考', times: '本次是2021年语文第一次月考，', createp: '创建人', createname: '吴加好', createt: '创建时间', createtime: '2016-06-16 14:03', uses: '使用次数', number: '10次', id: '4'
    },
    {
        img: '图片', examina: '2021年语文第一次月考', times: '本次是2021年语文第一次月考，', createp: '创建人', createname: '吴加好', createt: '创建时间', createtime: '2016-06-16 14:03', uses: '使用次数', number: '8次', id: '5'
    },
    {
        img: '图片', examina: '2021年语文第一次月考', times: '本次是2021年语文第一次月考，', createp: '创建人', createname: '吴加好', createt: '创建时间', createtime: '2016-06-16 14:03', uses: '使用次数', number: '10次', id: '6'
    },
];
let toTable = document.querySelector('table');
let paging = document.querySelector('.lwy-main-sect-paging ul');
let searchFor = document.querySelector('.lwy-main-sect-examinationinformation-nav-search');
let use = document.querySelectorAll('.nav-pill li');
let pageStripBelow = document.querySelector('.lwy-page-info');
let pageStripBelow2 = document.querySelector('.lwy-page-info2');
let pageStripBelow4 = document.querySelector('.lwy-page-info3');
let pageStripBelow3 = document.querySelector('.lwy-page-info3 a');
let pageStripBelow5 = document.querySelector('.lwy-main-sect-dropDown-li2');
let pageStripBelowS = document.querySelector('.lwy-page-info-span1');
let pageStripBelow6 = document.querySelector('.lwy-main-sect-dropDown-li1');
let pageStripBelow7 = document.querySelector('.lwy-main-sect-dropDown-a2');
let count = 5;
let iNow = 1;
// 页面和分页渲染
function render(arr) {
    // 页面渲染
    let str = '';
    let renderDate = arr.slice((iNow - 1) * count, iNow * count);
    for (let i = 0; i < renderDate.length; i++) {
        str += ` <tr>
        <td>${renderDate[i].img}</td>
        <td>
            <p>${renderDate[i].examina}</p>
            <p>${renderDate[i].times}</p>
        </td>
        <td>
            <p>${renderDate[i].createp}</p>
            <p>${renderDate[i].createname}</p>
        </td>
        <td>
            <p>${renderDate[i].createt}</p>
            <p>${renderDate[i].createtime}</p>
        </td>
        <td>
            <p>${renderDate[i].uses}</p>
            <p>${renderDate[i].number}</p>
        </td>
        <td data-id="${renderDate[i].id}"><a href="../pages/test-paper.html">详情</a></td>
    </tr>`
    };
    toTable.innerHTML = str;
    // 分页渲染
    let pagesLeft = `<li>
    <a class="left" href="#" aria-lable="Previous><span  class="left " aria-hidden="true"><span class="glyphicon glyphicon-menu-left  left"></span></span>
    </a></li>`;
    let pagesRight = `<li>
    <a  class="right" href="#" aria-label="Next">
    <span  class="right glyphicon glyphicon-menu-right" aria-hidden="true"></span>
    </a>
    </li>`;
    let pagesStr = '';
    for (let i = 1; i <= Math.ceil(arr.length / count); i++) {
        if (iNow == i) {
            pagesStr += `<li class="active"><a href="#">${i}</a></li>`;
        } else {
            pagesStr += `<li><a href="#">${i}</a></li>`;
        }
    }
    paging.innerHTML = pagesLeft + pagesStr + pagesRight;
};
render(paper)
// 分页
function pan(e) {
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(paper.length / count)) {
            iNow++;
        }
    } else {
        iNow = e.target.innerText.trim();
    }
    render(paper);
};
function pan1(e) {
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(examination.length / count)) {
            iNow++;
        }
    } else {
        iNow = e.target.innerText.trim();
    }
    render(schedArr);
}
function pan2(e) {
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(schednArr.length / count)) {
            iNow++;
        }
    } else {
        iNow = e.target.innerText.trim();
    }
    render(schednArr);
}
function pan3(e) {
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(examination.length / count)) {
            iNow++;
        }
    } else {
        iNow = e.target.innerText.trim();
    }
    render(specificArr);
}
paging.addEventListener('click', pan);
pageStripBelow2.addEventListener('blur', function () {
    if (pageStripBelow2.value == '') {

    } else {
        iNow = pageStripBelow2.value;
        render(paper);
    }
});
pageStripBelow5.addEventListener('click', function () {
    count = pageStripBelow3.innerHTML
    if (pageStripBelow3.innerHTML == '4' && pageStripBelowS.innerHTML == '5条/页') {
        pageStripBelowS.innerHTML = '4条/页';
        pageStripBelow3.innerHTML = '5'
    } else {
        pageStripBelowS.innerHTML = '5条/页';
        pageStripBelow3.innerHTML = '4'
    }
    render(paper);
});
pageStripBelow6.addEventListener('click', function () {
    count = pageStripBelow7.innerHTML
    if (pageStripBelow7.innerHTML == '3' && pageStripBelowS.innerHTML == '5条/页') {
        pageStripBelowS.innerHTML = '3条/页';
        pageStripBelow7.innerHTML = '5'
    } else {
        pageStripBelowS.innerHTML = '5条/页';
        pageStripBelow7.innerHTML = '3'
    }
    render(paper);
});
pageStripBelow.addEventListener('click', function () {
    if (pageStripBelow4.style.display == 'none') {
        pageStripBelow4.style.display = 'block';
    } else {
        pageStripBelow4.style.display = 'none';
    };
});

// 搜索
searchFor.addEventListener('click', function () {
    iNow=1;
    let searchInput = document.querySelector('.lwy-main-sect-examinationinformation-nav-searchi').value;
    let valueP = [];
    for (let i = 0; i < paper.length; i++) {
        if (searchInput == paper[i].examina) {
            valueP.push(paper[i]);
        };
    };
    paging.removeEventListener('click', pan)
    paging.addEventListener('click', pan3)
    render(valueP);
});
// 使用情况
let schedArr;
let schednArr;
for (let i = 0; i < use.length; i++) {
    use[0].addEventListener('click', function () {
        use[0].classList.add('nav-pill-li-cclor');
        use[1].classList.remove('nav-pill-li-cclor');
        use[2].classList.remove('nav-pill-li-cclor');
        paging.removeEventListener('click', pan1);
        paging.removeEventListener('click', pan2);
        paging.addEventListener('click', pan);
        render(paper)
    });
    use[1].addEventListener('click', function () {
        use[1].classList.add('nav-pill-li-cclor');
        use[0].classList.remove('nav-pill-li-cclor');
        use[2].classList.remove('nav-pill-li-cclor');
        schedArr = [];
        for (let i = 0; i < paper.length; i++) {
            if (paper[i].number != '10次') {
                schedArr.push(paper[i]);
            }
        };
        paging.addEventListener('click', pan1);
        paging.removeEventListener('click', pan);
        render(schedArr)
    });
    use[2].addEventListener('click', function () {
        use[2].classList.add('nav-pill-li-cclor');
        use[0].classList.remove('nav-pill-li-cclor');
        use[1].classList.remove('nav-pill-li-cclor');
        schednArr = [];
        for (let i = 0; i < paper.length; i++) {
            if (paper[i].number == '10次') {
                schednArr.push(paper[i]);
            }
        };
        paging.addEventListener('click', pan2);
        paging.removeEventListener('click', pan);
        render(schednArr)
    });
};